// 人才分布统计页面样式
.talent-review-container {
  padding: 12px;
  background: #f5f5f5;
  min-height: 100vh;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px 24px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  h3 {
    margin: 0;
    color: #262626;
    font-size: 18px;
    font-weight: 600;
  }
}

.chart-controls {
  display: flex;
  gap: 12px;
}

// 维度控制面板样式
.dimension-controls {
  margin-bottom: 16px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex-shrink: 0; // 防止被压缩
  max-height: 180px; // 设置一个合理的最大高度，避免过度占用空间
  overflow-y: auto; // 内容过多时启用垂直滚动

  .ant-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .ant-btn-link {
    padding: 0 4px;
  }

  .control-item {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .control-label {
    font-weight: 500;
    color: #262626;
    min-width: 80px;
    font-size: 14px;
  }

  // Tabs容器样式优化
  .ant-tabs {
    &.ant-tabs-card {
      .ant-tabs-tab {
        border-radius: 6px 6px 0 0;
        background: rgba(248, 250, 252, 0.8);
        border: 1px solid #e2e8f0;
        margin-right: 2px;
        transition: all 0.2s ease;
        max-width: 120px; // 限制Tab最大宽度

        &:hover {
          background: rgba(59, 130, 246, 0.05);
          border-color: rgba(59, 130, 246, 0.2);
          transform: translateY(-1px);
        }

        &.ant-tabs-tab-active {
          background: white;
          border-color: #e2e8f0;
          border-bottom-color: white;
          font-weight: 500;

          .ant-tabs-tab-btn {
            color: #1e40af;
          }
        }

        // Tab标题截断样式
        .tab-title {
          display: inline-block;
          max-width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          vertical-align: middle;
        }
      }

      .ant-tabs-content-holder {
        border: 1px solid #e2e8f0;
        border-radius: 0 8px 8px 8px;
        background: white;
      }

      .ant-tabs-tabpane {
        padding: 0;
      }
    }
  }

  // Tab内容区域样式
  .tab-content {
    padding: 12px;
    overflow: hidden; // 防止内容溢出

    .ant-checkbox-group {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 8px;
      align-items: center;
      margin-bottom: 12px;
      width: 100%; // 确保不超出容器宽度
      box-sizing: border-box;

      .ant-checkbox-wrapper {
        margin: 0;
        padding: 4px 8px;
        border-radius: 4px;
        transition: all 0.2s ease;
        border: 1px solid transparent;
        background: rgba(248, 250, 252, 0.6);
        font-size: 12px;
        line-height: 1.3;
        width: 123px; // 增加固定宽度，允许显示更多内容
        flex-shrink: 0; // 不收缩

        &:hover {
          background: rgba(59, 130, 246, 0.08);
          border-color: rgba(59, 130, 246, 0.2);
          transform: translateY(-1px);
        }

        &.ant-checkbox-wrapper-checked {
          background: rgba(59, 130, 246, 0.1);
          border-color: #3b82f6;
          color: #1e40af;
          font-weight: 500;
        }

        .ant-checkbox {
          margin-right: 4px;
          flex-shrink: 0; // 复选框不收缩

          .ant-checkbox-inner {
            border-color: #cbd5e1;
            border-radius: 3px;
            transition: all 0.2s ease;
            width: 14px;
            height: 14px;

            &:hover {
              border-color: #3b82f6;
            }

            &::after {
              width: 4.5px;
              height: 8px;
            }
          }

          &.ant-checkbox-checked .ant-checkbox-inner {
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            border-color: #3b82f6;
          }
        }

        // 复选框文本截断样式
        .checkbox-text {
          display: inline-block;
          max-width: 90px; // 稍微增加宽度以适配固定列宽
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          vertical-align: top;
        }
      }
    }

    // 响应式设计 - 调整复选框宽度
    @media (max-width: 900px) {
      .ant-checkbox-wrapper {
        width: 130px; // 中小屏幕适当减小宽度（从100px增加到130px）
        padding: 3px 6px;
        font-size: 11px;

        .checkbox-text {
          max-width: 105px; // 相应增加文本宽度
        }
      }
    }

    @media (max-width: 600px) {
      .ant-checkbox-wrapper {
        width: 120px; // 移动端进一步缩小（从90px增加到120px）
        padding: 2px 4px;
        font-size: 10px;

        .checkbox-text {
          max-width: 95px; // 相应增加文本宽度
        }
      }
    }
  }

  // Tab操作按钮区域
  .tab-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    border-top: 1px solid #f0f0f0;
    padding-top: 8px;

    .ant-btn-link {
      padding: 2px 8px;
      font-size: 12px;
      height: auto;
      line-height: 1.3;
      border-radius: 4px;
      transition: all 0.2s ease;
      border: 1px solid transparent;

      &:hover {
        background: rgba(59, 130, 246, 0.1);
        border-color: rgba(59, 130, 246, 0.2);
        color: #1e40af;
        transform: translateY(-1px);
      }

      &:active {
        transform: translateY(0);
      }
    }
  }

  // 滚动条样式优化
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;

    &:hover {
      background: #a8a8a8;
    }
  }
}

// 图表内容容器样式
.chart-content {
  flex: 1; // 让图表内容占满剩余空间
  margin-top: 16px;
  background: white;
  border-radius: 8px;
  border: 2px solid #e8e8e8; // 添加边框宽度控制
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

// 让右侧图表区与图表本身铺满
.chart-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: 8px; // 给配置面板留一点视觉呼吸，避免"压住"的错觉
  box-sizing: border-box; // 确保padding包含在尺寸计算内
}

.chart-container {
  flex: 1;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 0; // 配合flex:1使用，确保能正确计算高度
  min-height: 0; // 允许在父容器变小时继续收缩
  overflow-y: auto; // 图表较高时，外层容器启用滚动，避免弹窗溢出
}

.chart-placeholder {
  height: 100%;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #e8e8e8; // 添加占位符边框
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;

  .placeholder-content {
    text-align: center;

    .placeholder-icon {
      font-size: 48px;
      color: #d9d9d9;
      margin-bottom: 8px;
    }
  }
}

// 让内部卡片类块级元素占满横向
.dimension-controls,
.chart-content {
  width: 100%;
  box-sizing: border-box;
}

// 响应式设计
@media (max-width: 768px) {
  .talent-review-container {
    padding: 12px;
  }

  .chart-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .chart-content {
    margin-top: 12px;
  }

  // 移动端调整控制面板高度
  .dimension-controls {
    max-height: 150px; // 移动端限制控制面板高度，确保图表有足够空间
    padding: 12px; // 减少内边距

    .control-item {
      margin-bottom: 8px; // 减少间距
      flex-direction: column; // 垂直排列
      align-items: flex-start; // 左对齐

      .control-label {
        min-width: auto; // 移除最小宽度限制
        margin-bottom: 4px; // 添加底部间距
      }

      .ant-checkbox-group {
        width: 100%; // 占满宽度
      }
    }
  }

  .chart-panel {
    padding: 4px; // 减少内边距
  }
}

// 大屏优化
@media (min-width: 1440px) {
  .dimension-controls {
    max-height: 200px; // 大屏幕可以稍微增加控制面板高度，但仍然保守
  }
}